<template>
	<div class="login-container">
		<el-form class="login-form">
			<div class="title-container">
        <h3 class="title"><small>奥凯航空--</small>系统登陆</h3>
			</div>
			<el-form-item prop="username">
				<i class="fa fa-user inline green"></i>
				<el-input v-model="username" name="username" type="text" placeholder="username" />

			</el-form-item>
			<el-form-item prop="password">
				<i class="fa fa-lock inline green"></i>
				<el-input v-model="password" name="password" :type="passwordtype" placeholder="password" />
				<span @click="showPWD">
					<i class="fa fa-eye inline green"></i>
				</span>
			</el-form-item>
			<el-button class="strength" type="primary" @click="btnLoginClick"><i class="fa fa-address-card" aria-hidden="true"></i>登陆</el-button>
			<div class="tips">
				<span>用户名：admin</span>
				<span>密码：admin</span>
			</div>
			<div class="tips">
				<span>用户名：editor</span>
				<span>密码：editor</span>
			</div>
		<!--	<el-button type="primary" class="thirdparty-button">
				<span>第三方登陆</span>
			</el-button>-->
		</el-form>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				username: '',
				password: '',
				passwordtype: 'password',
				loginstatus: false
			}
		},
		methods: {
			showPWD() {
				if(this.passwordtype == 'password') {
					this.passwordtype = 'text';
				} else {
					this.passwordtype = 'password';
				}
			},
			btnLoginClick() {
				this.$http.get('/api/user').then((response) => {
					response = response.body;
					const ERR_OK = 0;
					if(response.errno === ERR_OK) {

						if(this.checkUser(response.data)) {

							this.$router.push({
								path:'/index'
							});

						} else {
							this.$message({
								message: '用户名或者密码错误',
								type: 'warning'
							});
						}
					}
				});
			},
			checkUser(uList) {
				var that = this;
				return uList.filter(function(item) {
					return item.username == that.username && item.password == that.password;
				}).length > 0;
			}
		}
		}
</script>

<style>
	.inline {
		display: inline;
	}

	.strength {
		width: 100%;
		margin-bottom: 30px;
	}

	.green {
		color: green;
	}

	.login-container .el-input {
		display: inline-block;
		height: 47px;
		width: 85%;
	}

	.login-container .el-input input {
		background: transparent;
		border: 0px;
		-webkit-appearance: none;
		border-radius: 0px;
		padding: 12px 5px 12px 15px;
		color: #eee;
		height: 47px;
	}

	.login-container {
		position: fixed;
		height: 100%;
		width: 100%;
		background-color: #2d3a4b;

		opacity: 0.9;
	}


	.login-container .login-form {
		position: absolute;
		left: 0;
		right: 0;
		width: 520px;
		padding: 35px 35px 15px 35px;
		margin: 120px auto;
	}

	.title-container {
		position: relative;
	}

	.login-container .title-container .title {
		font-size: 26px;
		font-weight: 400;
		color: #eee;
		margin: 0px auto 40px auto;
		text-align: center;
		font-weight: bold;
	}

	.el-form-item {
		border: 1px solid rgba(255, 255, 255, 0.1);
		background: rgba(0, 0, 0, 0.1);
		border-radius: 5px;
		color: #454545;
	}

	.login-container .tips {
		font-size: 14px;
		margin-bottom: 10px;
		color: #fff;
	}

	.login-container .thirdparty-button {
		position: absolute;
		right: 35px;
		bottom: 28px;
	}

  .el-button{
     font-size: 1.2em;
     letter-spacing: 20px;
  }
</style>
